<template>
  <template v-if="user">
    <van-cell title="用户名" is-link to="/user/edit" :value="user.username"
              @click="toEdit('username','用户名',user.username)"/>
    <van-cell title="账号" :value="user.userAccount"/>
    <van-cell title="头像" is-link to="/user/edit" arrow-direction="down">
      <img style="height: 48px" :src="user.avatarUrl" alt="">
    </van-cell>
    <van-cell title="性别" is-link arrow-direction="down" :value="user.gender"
              @click="toEdit('gender','性别',user.gender)"/>
    <van-cell title="邮箱" is-link to="/user/edit" arrow-direction="down" :value="user.email"
              @click="toEdit('email','邮箱',user.email)"/>
    <van-cell title="电话" is-link to="/user/edit" arrow-direction="down" :value="user.phone"
              @click="toEdit('phone','电话',user.phone)"/>
    <van-cell title="星球编号" arrow-direction="down" :value="user.planetCode"/>
    <van-cell title="注册时间" arrow-direction="down" :value="user.createTime"/>
  </template>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";

import {getCurrentUser} from "../services/user";
import {setCurrentUserState} from "../states/user";
import myAxios from "../plugins/myAxios";

// const user = {
//   id: 1,
//   username: '鱼皮',
//   userAccount: 'dogyupi',
//   avatarUrl: 'https://img2.baidu.com/it/u=390829681,3002818272&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
//   gender: '男',
//   phone: '12312341234',
//   email: '12346543@qq.com',
//   planetCode: '1234',
//   createTime: new Date(),
// }

const router = useRouter();


const toEdit = (editKey: string, editName: string, currentValue: string) => {
  router.push({
    path: '/user/edit',
    query: {
      editKey,
      editName,
      currentValue,
    }
  })
};

const user = ref();
onMounted(async () => {
  const res = await myAxios.get('/user/current');
  if (res.code === 0) {
    setCurrentUserState(res.data);
    user.value = res.data;
  }
});
</script>

<style scoped>

</style>
